<!--登录页面-->

<!--模板-->
<template>
<!--整体背景、水平垂直剧中-->
<div class="loginbg">
    <div style="display: flex; background-color: white; width: 50%; height: 55%; border-radius: 7px; overflow: hidden">
        <!--将flex拆分、left：存放图片-->
        <div style="flex: 1; display: flex; align-items: center; justify-content: center">
            <img src="@/assets/imge/login.png" alt="登录背景图" style="width: 100%">
        </div>
        <!--将flex拆分、right：输入框及按钮-->
        <div style="flex: 1; display: flex; align-items: center; justify-content: center">
            <!--ref="formRef"：绑定引用对象 : 引用 el-form 组件实例-->
            <el-form ref="formRef" :model="data.form" :rules="data.rules" style="width: 80%">
                <div style="font-size: 20px; font-weight: bold; text-align: center; margin-bottom: 20px">
                    ITCACP登录
                </div>
                <el-form-item prop="username">
                    <el-input size="default" placeholder="请输入账号" v-model="data.form.username" prefix-icon="User" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <!--show-password设置密文-->
                    <el-input show-password size="default" placeholder="请输入密码" v-model="data.form.password" prefix-icon="Lock" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item prop="validCode" style="height: 32px;">
                    <div style="display: flex">
                            <!--left：验证码输入框：绑定一个validCode，用于接收用户输入的code-->
                            <el-input style="flex: 1; height: 32px" size="default" v-model="data.form.validCode" placeholder="不区分大小写" prefix-icon="circle-check" autocomplete="off"></el-input>
                        <!--right：验证码动态图-->
                        <div style="flex: 1"><ValidCode @codeGenerated="handleCodeGenerated"/></div>
                    </div>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" style="width: 100%" size="large" @click="login">登 录</el-button>
                </el-form-item>
                <div style="display: flex">
                    <div style="flex: 1; text-align: left">还没有账号？去<a style="color: cornflowerblue" href="/Register">注册</a></div>
                    <div style="flex: 1; text-align: right"><a style="color: cornflowerblue" href="#">忘记密码？</a></div>
                </div>
            </el-form>
        </div>
    </div>
</div>
</template>


<!--逻辑-->
<script setup>
import { reactive, ref} from "vue";
import ValidCode from "@/components/ValidCode.vue";
import request from "@/utils/request.js";
import {ElMessage} from "element-plus";
import router from "@/router/index.js";

//用于引用 el-form 组件实例
const formRef = ref()
//ref 函数创建一个基本数据类型，用于接收VaildCode中生成的code
const generatedCode = ref('');

const data = reactive({
    form: {
        validCode: '',
    },
    // 表单校验规则
    rules: {
        username: [
            { required: true, message: '请输入账号', trigger: 'blur' },
            { min: 3, message: '账号最少3位', trigger: 'blur' },
            { max: 20, message: '账号最多20位', trigger: 'blur' },
            { pattern: /^[a-zA-Z0-9]+$/, message: '账号只能包含字母和数字', trigger: 'blur' }
        ],
        password: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 6, message: '密码最少6位', trigger: 'blur' },
        ],
        validCode: [
            { required: true, message: '请输入验证码', trigger: 'blur' },
            { max: 4, message: '最多4位', trigger: 'blur' },
        ],
    }
})


// 监听 ValidCode 组件的 codeGenerated 事件，当事件触发时，把验证码存储在 validCode 变量中。
const handleCodeGenerated = (code) => {
    generatedCode.value = code;  //生成的验证码 转为小写
    console.log(generatedCode.value);
};



//登录方法
// formRef.value 就是 el-form 组件的实例，借助这个实例就能调用 el-form 提供的方法：validate 是el-form组件实例的一个方法，其作用是触发表单验证。该方法接受一个回调函数作为参数，这个回调函数会在验证完成后被调用，并且会传入一个布尔类型的参数 valid，以此表示表单验证是否通过。
const login = () => {
    formRef.value.validate((valid) => {
        if (valid) {
            const inputCode = data.form.validCode.toLowerCase()
            console.log(inputCode)
            try {
                //data.from传递参数到后端
                request.post('/api/users/login', data.form).then(res => {  //res 是一个任意类型的值，一般是服务器返回的数据对象, 箭头函数 res => { ... } 处理这个结果的具体逻辑
                    if (res.code === '200' && generatedCode.value === inputCode) {  //状态码 + 动态验证码验证
                        localStorage.setItem("code_user", JSON.stringify(res.data || {}))   // 存储用户信息、  JSON.stringify(res.data：对象转化为json格式
                        ElMessage.success('登录成功')
                        router.push('/userhome')   //登录成功后跳转到首页
                    } else if (res.code === '500') {  // 后端校验时抛出的自定义错误
                        ElMessage.error(res.msg)
                    } else if (res.code === '200' && !(generatedCode.value === inputCode)) {
                        ElMessage.error('验证码错误')
                    } else {
                        ElMessage.error('登录失败: ', res.msg)
                    }
                })
            } catch (error) {
                ElMessage.error('请求出错:', error);
            }
        }
    })
}
</script>


<!--样式-->
<style>
.loginbg {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background-image: url("@/assets/imge/loginbg.jpg");
    background-size: cover;
}
</style>